<template>
    <div class="contion">
        <div class="detail">
            <van-icon name="arrow-left" size="20" @click="home()" style="margin-top:30px;margin-right:80px"/>
            <h2>产品详情</h2>
        </div>
        <ul style="font-size:20px">
            <li>
                <img :src="detalist.image" style="width: 300px;height: 300px;">
            </li>
            {{ detalist.id }}
            <li>{{ detalist.name }}</li>
            <li>{{ detalist.ca }}</li>
            <li>{{ detalist.price }}</li>
            <li>{{ detalist.desc }}</li>
        </ul>
        <div class="con">
            <van-icon name="shopping-cart-o" size="25" color="#FFFFFF" style="margin-top:20px;margin-left:20px"/>
            <div class="con_1">
                <el-button @click="cart()">添加到购物车</el-button>
            </div>
            <div class="con_2">
                ￥{{ detalist.price }}
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter,useRoute} from 'vue-router'

const router = useRouter()
const route = useRoute()

let detalist = ref([])

const getData = () => { 
    axios.get(`http://127.0.0.1:8000/home/shoe2/${route.query.id}`).then(res => {
        detalist.value = res.data
        // console.log(res)
        // console.log(route.query.id)
    })
}

const cart = () => {
    axios.post("http://127.0.0.1:8000/home/cart/",{user:localStorage.getItem('userid'),shoes:route.query.id}).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/cart')
        }
        else{
            ElMessage.error(res.data.msg)
        }
})
}

const home = () =>{
    router.back();
}

onMounted(() => {
    getData()
})



</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.con{
    width: 300px;
    height: 70px;
    background-color: #E44F32;
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    border-radius: 15px;
}

.con_1 button{
    background-color: #E44F32;
    border: 0ch;
    border-right: 1px solid white;
    margin-top: 20px;
    color: #FFFFFF;
    padding-right: 50px;
}

.con_2{
    margin-top: 25px;
    margin-left: 40px;
    color: #FFFFFF;
}

.detail{
    display: flex;
    flex-direction: row;
    width: 300px;
}

</style>